import type {
  ActionType,
  ProColumns,
  ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import {
  FooterToolbar,
  PageContainer,
  ProDescriptions,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Drawer, Input, message, Popconfirm } from 'antd';
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
import React, { useCallback, useRef, useState } from 'react';
import { product, removeProduct } from '@/services/ant-design-pro/api';
import CreateForm from './components/CreateForm';
const Product: React.FC = () => {
  const actionRef = useRef<ActionType | null>(null);
  const [categoryData, setCategoryData] = useState([])
  const [messageApi, contextHolder] = message.useMessage();

  const { run, loading } = useRequest(removeProduct, {
    manual: true,
    onSuccess: () => {
      messageApi.success('删除成功');
      actionRef.current?.reload?.();
    },
    onError: () => {
      messageApi.error('删除失败');
    },
  });
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();


  const columns: ProColumns<any>[] = [
    {
      title: '商品名称',
      dataIndex: 'name',
    },
    {
      title: '图片',
      dataIndex: 'thumb_url',
      hideInSearch: true,
      render: (text, record) => (
        <img src={record.thumb_url || "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"} alt="商品图片" style={{ width: 50, height: 50 }} />
      ),
    },
    {
      title: '分类',
      dataIndex: 'category.name',
      renderText(text, record, index, action) {
        return record.category ? record.category.name : '未分类';
      },
    },
    {
      title: '商品描述',
      dataIndex: 'description',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInForm: true,
      valueEnum: {
        1: {
          text: '上架',
          status: 'Processing',
        },
        2: {
          text: '下架',
          status: 'Default',
        },
      },
    },
    {
      title: '创建时间',
      sorter: true,
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record: any) => [
        <CreateForm
          key="config"
          reload={actionRef.current?.reload}
          values={record}
        />,
        <Popconfirm key="delete" title="确定删除吗？" okText="是" cancelText="否" onConfirm={() => run(record.id as number)}>
          <a>删除</a>
        </Popconfirm>
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.BaseList>
        headerTitle="商品列表"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={(action) => {
          return  [
            <CreateForm key="create" reload={action?.reload} />,
          ]
        }}
        request={async (params: any) => {
          const res = await product({pageSize: params.pageSize, current: params.current});
          return {
            data: res.data?.list ?? [],
            total: res.data?.count ?? 0,
            success: !!res.data,
          };
        }}
        columns={columns}
      />
    </PageContainer>
  )
}

export default Product;